<!--
 * @Author: ShallowInk
 * @Date: 2021-07-31 10:02:11
 * @Description: Data图表
 * @FilePath: \GoodsManagement\src\pages\DataReport.vue
-->
<template>
  <div class="app">
    <div id="main" style="width: 800px; height: 600px"></div>
  </div>
</template>
<script lang="ts">
import * as echarts from "echarts/core";
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";

export default {
  mounted() {
    echarts.use([
      TitleComponent,
      ToolboxComponent,
      TooltipComponent,
      GridComponent,
      LegendComponent,
      LineChart,
      CanvasRenderer,
    ]);

    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom!);
    var option;

    option = {
      title: {
        text: "用户来源",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        data: ["华东", "华南", "华北", "西部", "其他"],
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: ["2017-12-27", "2017-12-29", "2017-12-30", "2017-12-31", "2018-1-1", "2018-1-2", "2018-1-3"],
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "西部",
          type: "line",
          stack: "总量",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [12000, 13200, 10100, 13400, 9000, 23000, 21000],
        },
        {
          name: "华东",
          type: "line",
          stack: "总量",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [15000, 23200, 20100, 15400, 19000, 33000, 41000],
          
        },
        {
          name: "华南",
          type: "line",
          stack: "总量",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [32000, 33200, 30100, 33400, 39000, 33000, 32000],
        },
        {
          name: "华北",
          type: "line",
          stack: "总量",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [22000, 18200, 19100, 23400, 29000, 33000, 31000],
        },
        {
          name: "其他",
          type: "line",
          stack: "总量",
          label: {
            show: true,
            position: "top",
          },
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [50000, 40000, 50400, 58872, 63647, 70504, 80000],
        },
      ],
    };

    option && myChart.setOption(option);
  },
};
</script>
<style>
  .app {
    margin: 24px;
    padding: 1px;
    background: #fff;
  }
  #main{
    margin: 50px auto;
  }
</style>
